import React, { useState, useEffect } from "react";
import { Modal, Form, Input, Button, Select, Upload, Icon, message } from "antd";
import { uploadToQiniu } from "@/utils/qiniuUpload";
const { Option } = Select;

const AddOrEditModal = ({ title, visible, setVisible, fileList, setfileList, rowData, form, onSubmit }) => {


  const handleUploadFiles = async ({ fileList }) => {
    if (!fileList[0]) {
      setfileList([])
      return
    }
    const file = fileList[0]
    const isxlsx = file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    if (!isxlsx) {
      message.error("You can only upload xlsx file!");
      return
    }
    const res = await uploadToQiniu(file.originFileObj, () => { })
    setfileList([{ uid: 0, url: res, name: '费用表格.xlsx' }])
  };
  const handleOk = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if (!fileList.length) {
        message.error('请上传费用表格！')
        return
      }
      const { costStatus, name } = fieldsValue
      onSubmit({ costStatus, name, costUrl: fileList[0].url })
    })
  };
  return (
    <Modal
      destroyOnClose
      title={title}
      visible={visible}
      onOk={handleOk}
      onCancel={() => setVisible(false)}
      okText="确定"
      cancelText="取消"
    >
      <Form  >
        <Form.Item
          label="费用名称"
        >
          {form.getFieldDecorator("name", {
            rules: [{ required: true, message: "请输入费用名称！" }],
            initialValue: rowData?.name
          })(
            <Input allowClear />
          )}
        </Form.Item>

        <Form.Item label="费用状态">
          {form.getFieldDecorator("costStatus", {
            rules: [{ required: true, message: "请选择费用状态！" }],
            initialValue: rowData?.costStatus
          })(
            <Select allowClear>
              <Option value="SETTLED">已结清</Option>
              <Option value="UNCLEARED">未结清</Option>
              <Option value="PREPAID ">已预付</Option>
            </Select>
          )}
        </Form.Item>

        <Form.Item label="" name="username">
          <Upload
            fileList={fileList}
            onChange={handleUploadFiles}
          >
            {
              fileList.length < 1 && <Button><Icon type="upload" /> 上传费用表格</Button>
            }
          </Upload>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Form.create()(AddOrEditModal);
